<template>
  <el-tabs value="0">
    <el-tab-pane label="属性" name="0">
      <el-collapse accordion value="0">
        <!-- 指定属性 -->
        <el-collapse-item title="常规设置" name="0">
          <el-form label-width="80px" size="mini">
            <el-form-item label="图层名称">
              <el-input v-model="widget.layer.name" clearable></el-input>
            </el-form-item>
            <!-- 柱形图 -->
            <template v-if="showWidget('bar')">
              <el-form-item label="柱形宽度">
                <el-slider
                  v-model="widget.option.series[0].barWidth"
                ></el-slider>
              </el-form-item>
              <el-form-item label="柱形圆角">
                <el-slider
                  :min="0"
                  :max="30"
                  v-model="widget.option.series[0].itemStyle.borderRadius"
                ></el-slider>
              </el-form-item>
            </template>
            <!-- 折线图 -->
            <template v-if="showWidget('line')">
              <el-form-item label="平滑曲线">
                <el-switch v-model="widget.option.series[0].smooth">
                </el-switch>
              </el-form-item>
              <el-form-item label="堆积面积">
                <el-slider
                  :min="0"
                  :max="1"
                  :step="0.1"
                  v-model="widget.option.series[0].areaStyle.opacity"
                ></el-slider>
              </el-form-item>
            </template>
            <!-- 饼图 -->
            <template v-if="showWidget('pie')">
              <el-form-item label="内圆半径">
                <el-slider
                  v-model="widget.option.series[0].customRadius[0]"
                ></el-slider>
              </el-form-item>
              <el-form-item label="外圆半径">
                <el-slider
                  v-model="widget.option.series[0].customRadius[1]"
                ></el-slider>
              </el-form-item>
            </template>
            <!-- 散点图 -->
            <template v-if="showWidget('scatter')">
              <el-form-item label="散点大小">
                <el-slider
                  v-model="widget.option.series[0].symbolSize"
                ></el-slider>
              </el-form-item>
            </template>
            <!-- 象形图 -->
            <template v-if="showWidget('pictorial')">
              <el-form-item label="图片">
                <el-col :span="19">
                  <el-input
                    v-model="widget.option.series[0].customSymbol"
                  ></el-input>
                </el-col>
                <el-col :span="5">
                  <image-upload @uploadSuccess="uploadSuccess"></image-upload>
                </el-col>
              </el-form-item>
              <el-form-item label="边距">
                <el-input-number
                  controls-position="right"
                  v-model="widget.option.series[0].symbolMargin"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="大小">
                <el-input-number
                  controls-position="right"
                  v-model="widget.option.series[0].symbolSize"
                ></el-input-number>
              </el-form-item>
            </template>
            <!-- 雷达图 -->
            <template v-if="showWidget('radar')">
              <el-form-item label="内圈半径">
                <el-slider
                  v-model="widget.option.radar.customRadius[0]"
                ></el-slider>
              </el-form-item>
              <el-form-item label="外圈半径">
                <el-slider
                  v-model="widget.option.radar.customRadius[1]"
                ></el-slider>
              </el-form-item>
              <el-form-item label="区域透明度">
                <el-slider
                  :min="0"
                  :max="1"
                  :step="0.1"
                  v-model="widget.option.radar.customOpacity"
                ></el-slider>
              </el-form-item>
            </template>
            <!-- 仪表盘 -->
            <template v-if="showWidget('gauge')">
              <el-form-item label="进度">
                <el-switch v-model="widget.option.series[0].progress.show">
                </el-switch>
              </el-form-item>
              <el-form-item label="进度宽度">
                <el-input-number
                  controls-position="right"
                  v-model="widget.option.series[0].progress.width"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="指针颜色">
                <el-col :span="19">
                  <el-input
                    v-model="widget.option.series[0].itemStyle.color"
                  ></el-input>
                </el-col>
                <el-col :span="5">
                  <el-color-picker
                    v-model="widget.option.series[0].itemStyle.color"
                  ></el-color-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="轴线">
                <el-switch v-model="widget.option.series[0].axisLine.show">
                </el-switch>
              </el-form-item>
              <el-form-item label="轴线宽度">
                <el-input-number
                  controls-position="right"
                  v-model="widget.option.series[0].axisLine.lineStyle.width"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="轴线颜色">
                <el-col :span="19">
                  <el-input
                    v-model="
                      widget.option.series[0].axisLine.lineStyle.customColor
                    "
                  ></el-input>
                </el-col>
                <el-col :span="5">
                  <el-color-picker
                    v-model="
                      widget.option.series[0].axisLine.lineStyle.customColor
                    "
                  ></el-color-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="分割线">
                <el-switch v-model="widget.option.series[0].splitLine.show">
                </el-switch>
              </el-form-item>
              <el-form-item label="分割线颜色">
                <el-col :span="19">
                  <el-input
                    v-model="widget.option.series[0].splitLine.lineStyle.color"
                  ></el-input>
                </el-col>
                <el-col :span="5">
                  <el-color-picker
                    v-model="widget.option.series[0].splitLine.lineStyle.color"
                  ></el-color-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="刻度线">
                <el-switch v-model="widget.option.series[0].axisTick.show">
                </el-switch>
              </el-form-item>
              <el-form-item label="刻度线颜色">
                <el-col :span="19">
                  <el-input
                    v-model="widget.option.series[0].axisTick.lineStyle.color"
                  ></el-input>
                </el-col>
                <el-col :span="5">
                  <el-color-picker
                    v-model="widget.option.series[0].axisTick.lineStyle.color"
                  ></el-color-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="标签">
                <el-switch v-model="widget.option.series[0].axisLabel.show">
                </el-switch>
              </el-form-item>
              <el-form-item label="标签颜色">
                <el-col :span="19">
                  <el-input
                    v-model="widget.option.series[0].axisLabel.color"
                  ></el-input>
                </el-col>
                <el-col :span="5">
                  <el-color-picker
                    v-model="widget.option.series[0].axisLabel.color"
                  ></el-color-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="标签大小">
                <el-input-number
                  controls-position="right"
                  v-model="widget.option.series[0].axisLabel.fontSize"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="标签粗细">
                <el-select
                  v-model="widget.option.series[0].axisLabel.fontWeight"
                  popper-class="black-select"
                >
                  <el-option label="normal" value="normal"></el-option>
                  <el-option label="bold" value="bold"></el-option>
                  <el-option label="bolder" value="bolder"></el-option>
                  <el-option label="lighter" value="lighter"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="数值颜色">
                <el-col :span="19">
                  <el-input
                    v-model="widget.option.series[0].detail.color"
                  ></el-input>
                </el-col>
                <el-col :span="5">
                  <el-color-picker
                    v-model="widget.option.series[0].detail.color"
                  ></el-color-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="数值大小">
                <el-input-number
                  controls-position="right"
                  v-model="widget.option.series[0].detail.fontSize"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="数值粗细">
                <el-select
                  v-model="widget.option.series[0].detail.fontWeight"
                  popper-class="black-select"
                >
                  <el-option label="normal" value="normal"></el-option>
                  <el-option label="bold" value="bold"></el-option>
                  <el-option label="bolder" value="bolder"></el-option>
                  <el-option label="lighter" value="lighter"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="水平偏移">
                <el-slider
                  :min="-100"
                  :max="100"
                  v-model="widget.option.series[0].detail.customOffsetCenter[0]"
                ></el-slider>
              </el-form-item>
              <el-form-item label="垂直偏移">
                <el-slider
                  v-model="widget.option.series[0].detail.customOffsetCenter[1]"
                ></el-slider>
              </el-form-item>
            </template>
            <!-- 地图 -->
            <template v-if="showWidget('map')">
              <el-form-item label="地图">
                <el-select
                  v-model="widget.option.geo.map"
                  popper-class="black-select"
                  @change="handleChangeMap"
                >
                  <el-option
                    v-for="(map, index) in maps"
                    :key="index"
                    :label="map.label"
                    :value="map.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="缩放比例">
                <el-input-number
                  controls-position="right"
                  v-model="widget.option.geo.zoom"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="中心点经度">
                <el-input-number
                  controls-position="right"
                  v-model="widget.option.geo.center[0]"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="中心点纬度">
                <el-input-number
                  controls-position="right"
                  v-model="widget.option.geo.center[1]"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="标签">
                <el-switch v-model="widget.option.series[0].label.show">
                </el-switch>
              </el-form-item>
              <el-form-item label="标签颜色">
                <el-col :span="19">
                  <el-input
                    v-model="widget.option.series[0].label.color"
                  ></el-input>
                </el-col>
                <el-col :span="5">
                  <el-color-picker
                    v-model="widget.option.series[0].label.color"
                  ></el-color-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="标签大小">
                <el-input-number
                  controls-position="right"
                  v-model="widget.option.series[0].label.fontSize"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="标签粗细">
                <el-select
                  v-model="widget.option.series[0].label.fontWeight"
                  popper-class="black-select"
                >
                  <el-option label="normal" value="normal"></el-option>
                  <el-option label="bold" value="bold"></el-option>
                  <el-option label="bolder" value="bolder"></el-option>
                  <el-option label="lighter" value="lighter"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="区域颜色">
                <el-col :span="19">
                  <el-input
                    v-model="widget.option.series[0].itemStyle.areaColor"
                  ></el-input>
                </el-col>
                <el-col :span="5">
                  <el-color-picker
                    v-model="widget.option.series[0].itemStyle.areaColor"
                  ></el-color-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="边框颜色">
                <el-col :span="19">
                  <el-input
                    v-model="widget.option.series[0].itemStyle.borderColor"
                  ></el-input>
                </el-col>
                <el-col :span="5">
                  <el-color-picker
                    v-model="widget.option.series[0].itemStyle.borderColor"
                  ></el-color-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="高亮标签色">
                <el-col :span="19">
                  <el-input
                    v-model="widget.option.series[0].emphasis.label.color"
                  ></el-input>
                </el-col>
                <el-col :span="5">
                  <el-color-picker
                    v-model="widget.option.series[0].emphasis.label.color"
                  ></el-color-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="高亮区域色">
                <el-col :span="19">
                  <el-input
                    v-model="
                      widget.option.series[0].emphasis.itemStyle.areaColor
                    "
                  ></el-input>
                </el-col>
                <el-col :span="5">
                  <el-color-picker
                    v-model="
                      widget.option.series[0].emphasis.itemStyle.areaColor
                    "
                  ></el-color-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="数值">
                <el-switch v-model="widget.option.series[1].label.show">
                </el-switch>
              </el-form-item>
              <el-form-item label="数值颜色">
                <el-col :span="19">
                  <el-input
                    v-model="widget.option.series[1].label.color"
                  ></el-input>
                </el-col>
                <el-col :span="5">
                  <el-color-picker
                    v-model="widget.option.series[1].label.color"
                  ></el-color-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="数值大小">
                <el-input-number
                  controls-position="right"
                  v-model="widget.option.series[1].label.fontSize"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="数值粗细">
                <el-select
                  v-model="widget.option.series[1].label.fontWeight"
                  popper-class="black-select"
                >
                  <el-option label="normal" value="normal"></el-option>
                  <el-option label="bold" value="bold"></el-option>
                  <el-option label="bolder" value="bolder"></el-option>
                  <el-option label="lighter" value="lighter"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="气泡大小">
                <el-slider
                  v-model="widget.option.series[1].symbolSize"
                ></el-slider>
              </el-form-item>
              <el-form-item label="气泡颜色">
                <el-col :span="19">
                  <el-input v-model="widget.option.color[0]"></el-input>
                </el-col>
                <el-col :span="5">
                  <el-color-picker
                    v-model="widget.option.color[0]"
                  ></el-color-picker>
                </el-col>
              </el-form-item>

              <el-form-item label="阴影色">
                <el-col :span="19">
                  <el-input
                    v-model="widget.option.geo.itemStyle.shadowColor"
                  ></el-input>
                </el-col>
                <el-col :span="5">
                  <el-color-picker
                    v-model="widget.option.geo.itemStyle.shadowColor"
                  ></el-color-picker>
                </el-col>
              </el-form-item>
            </template>
          </el-form>
        </el-collapse-item>
        <!-- 通用属性 -->
        <el-collapse-item title="标题设置" name="1" v-if="showProp('title')">
          <el-form label-width="80px" size="mini">
            <el-form-item label="显示">
              <el-switch v-model="widget.option.title.show"> </el-switch>
            </el-form-item>
            <el-form-item label="标题">
              <el-input clearable v-model="widget.option.title.text"></el-input>
            </el-form-item>
            <el-form-item label="字体颜色">
              <el-col :span="19">
                <el-input
                  v-model="widget.option.title.textStyle.color"
                ></el-input>
              </el-col>
              <el-col :span="5">
                <el-color-picker
                  v-model="widget.option.title.textStyle.color"
                ></el-color-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="字体大小">
              <el-input-number
                controls-position="right"
                v-model="widget.option.title.textStyle.fontSize"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="字体粗细">
              <el-select
                v-model="widget.option.title.textStyle.fontWeight"
                popper-class="black-select"
              >
                <el-option label="normal" value="normal"></el-option>
                <el-option label="bold" value="bold"></el-option>
                <el-option label="bolder" value="bolder"></el-option>
                <el-option label="lighter" value="lighter"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="字体位置">
              <el-select
                v-model="widget.option.title.left"
                popper-class="black-select"
              >
                <el-option label="left" value="left"></el-option>
                <el-option label="center" value="center"></el-option>
                <el-option label="right" value="right"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="副标题">
              <el-input
                clearable
                v-model="widget.option.title.subtext"
              ></el-input>
            </el-form-item>
            <el-form-item label="字体颜色">
              <el-col :span="19">
                <el-input
                  v-model="widget.option.title.subtextStyle.color"
                ></el-input>
              </el-col>
              <el-col :span="5">
                <el-color-picker
                  v-model="widget.option.title.subtextStyle.color"
                ></el-color-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="字体大小">
              <el-input-number
                controls-position="right"
                v-model="widget.option.title.subtextStyle.fontSize"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="字体粗细">
              <el-select
                v-model="widget.option.title.subtextStyle.fontWeight"
                popper-class="black-select"
              >
                <el-option label="normal" value="normal"></el-option>
                <el-option label="bold" value="bold"></el-option>
                <el-option label="bolder" value="bolder"></el-option>
                <el-option label="lighter" value="lighter"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="图例设置" name="2" v-if="showProp('legend')">
          <el-form label-width="80px" size="mini">
            <el-form-item label="显示">
              <el-switch v-model="widget.option.legend.show"> </el-switch>
            </el-form-item>
            <el-form-item label="位置">
              <el-select
                v-model="widget.option.legend.left"
                popper-class="black-select"
              >
                <el-option label="left" value="left"></el-option>
                <el-option label="center" value="center"></el-option>
                <el-option label="right" value="right"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="朝向">
              <el-select
                v-model="widget.option.legend.orient"
                popper-class="black-select"
              >
                <el-option label="horizontal" value="horizontal"></el-option>
                <el-option label="vertical" value="vertical"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="字体大小">
              <el-input-number
                controls-position="right"
                v-model="widget.option.legend.textStyle.fontSize"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="字体颜色">
              <el-col :span="19">
                <el-input
                  v-model="widget.option.legend.textStyle.color"
                ></el-input>
              </el-col>
              <el-col :span="5">
                <el-color-picker
                  v-model="widget.option.legend.textStyle.color"
                ></el-color-picker>
              </el-col>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="边距设置" name="3" v-if="showProp('grid')">
          <el-form label-width="80px" size="mini">
            <el-form-item label="顶部边距">
              <el-input-number
                controls-position="right"
                v-model="widget.option.grid.top"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="右边边距">
              <el-input-number
                controls-position="right"
                v-model="widget.option.grid.right"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="底部边距">
              <el-input-number
                controls-position="right"
                v-model="widget.option.grid.bottom"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="左边边距">
              <el-input-number
                controls-position="right"
                v-model="widget.option.grid.left"
              ></el-input-number>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="提示设置" name="4" v-if="showProp('tooltip')">
          <el-form label-width="80px" size="mini">
            <el-form-item label="字体大小">
              <el-input-number
                controls-position="right"
                v-model="widget.option.tooltip.textStyle.fontSize"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="字体粗细">
              <el-select
                v-model="widget.option.tooltip.textStyle.fontWeight"
                popper-class="black-select"
              >
                <el-option label="normal" value="normal"></el-option>
                <el-option label="bold" value="bold"></el-option>
                <el-option label="bolder" value="bolder"></el-option>
                <el-option label="lighter" value="lighter"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="字体颜色">
              <el-col :span="19">
                <el-input
                  v-model="widget.option.tooltip.textStyle.color"
                ></el-input>
              </el-col>
              <el-col :span="5">
                <el-color-picker
                  v-model="widget.option.tooltip.textStyle.color"
                ></el-color-picker>
              </el-col>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="X轴设置" name="5" v-if="showProp('xAxis')">
          <el-form label-width="80px" size="mini">
            <el-form-item label="坐标轴">
              <el-switch v-model="widget.option.xAxis.axisLine.show">
              </el-switch>
            </el-form-item>
            <el-form-item label="轴颜色">
              <el-col :span="19">
                <el-input
                  v-model="widget.option.xAxis.axisLine.lineStyle.color"
                ></el-input>
              </el-col>
              <el-col :span="5">
                <el-color-picker
                  v-model="widget.option.xAxis.axisLine.lineStyle.color"
                ></el-color-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="标签">
              <el-switch v-model="widget.option.xAxis.axisLabel.show">
              </el-switch>
            </el-form-item>
            <el-form-item label="标签大小">
              <el-input-number
                controls-position="right"
                v-model="widget.option.xAxis.axisLabel.fontSize"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="标签粗细">
              <el-select
                v-model="widget.option.xAxis.axisLabel.fontWeight"
                popper-class="black-select"
              >
                <el-option label="normal" value="normal"></el-option>
                <el-option label="bold" value="bold"></el-option>
                <el-option label="bolder" value="bolder"></el-option>
                <el-option label="lighter" value="lighter"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标签颜色">
              <el-col :span="19">
                <el-input
                  v-model="widget.option.xAxis.axisLabel.color"
                ></el-input>
              </el-col>
              <el-col :span="5">
                <el-color-picker
                  v-model="widget.option.xAxis.axisLabel.color"
                ></el-color-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="刻度">
              <el-switch v-model="widget.option.xAxis.axisTick.show">
              </el-switch>
            </el-form-item>
            <el-form-item label="网格线">
              <el-switch v-model="widget.option.xAxis.splitLine.show">
              </el-switch>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="Y轴设置" name="6" v-if="showProp('yAxis')">
          <el-form label-width="80px" size="mini">
            <el-form-item label="坐标轴">
              <el-switch v-model="widget.option.yAxis.axisLine.show">
              </el-switch>
            </el-form-item>
            <el-form-item label="轴颜色">
              <el-col :span="19">
                <el-input
                  v-model="widget.option.yAxis.axisLine.lineStyle.color"
                ></el-input>
              </el-col>
              <el-col :span="5">
                <el-color-picker
                  v-model="widget.option.yAxis.axisLine.lineStyle.color"
                ></el-color-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="标签">
              <el-switch v-model="widget.option.yAxis.axisLabel.show">
              </el-switch>
            </el-form-item>
            <el-form-item label="标签大小">
              <el-input-number
                controls-position="right"
                v-model="widget.option.yAxis.axisLabel.fontSize"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="标签粗细">
              <el-select
                v-model="widget.option.yAxis.axisLabel.fontWeight"
                popper-class="black-select"
              >
                <el-option label="normal" value="normal"></el-option>
                <el-option label="bold" value="bold"></el-option>
                <el-option label="bolder" value="bolder"></el-option>
                <el-option label="lighter" value="lighter"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标签颜色">
              <el-col :span="19">
                <el-input
                  v-model="widget.option.yAxis.axisLabel.color"
                ></el-input>
              </el-col>
              <el-col :span="5">
                <el-color-picker
                  v-model="widget.option.yAxis.axisLabel.color"
                ></el-color-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="刻度">
              <el-switch v-model="widget.option.yAxis.axisTick.show">
              </el-switch>
            </el-form-item>
            <el-form-item label="网格线">
              <el-switch v-model="widget.option.yAxis.splitLine.show">
              </el-switch>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="数值设置" name="7" v-if="showProp('series')">
          <el-form label-width="80px" size="mini">
            <el-form-item label="数值">
              <el-switch v-model="widget.option.series[0].label.show">
              </el-switch>
            </el-form-item>
            <el-form-item label="颜色">
              <el-col :span="19">
                <el-input
                  v-model="widget.option.series[0].label.color"
                ></el-input>
              </el-col>
              <el-col :span="5">
                <el-color-picker
                  v-model="widget.option.series[0].label.color"
                ></el-color-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="大小">
              <el-input-number
                controls-position="right"
                v-model="widget.option.series[0].label.fontSize"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="粗细">
              <el-select
                v-model="widget.option.series[0].label.fontWeight"
                popper-class="black-select"
              >
                <el-option label="normal" value="normal"></el-option>
                <el-option label="bold" value="bold"></el-option>
                <el-option label="bolder" value="bolder"></el-option>
                <el-option label="lighter" value="lighter"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="引导线">
              <el-switch v-model="widget.option.series[0].labelLine.show">
              </el-switch>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="颜色设置" name="8" v-if="showProp('color')">
          <el-form label-width="80px" size="mini">
            <el-form-item
              v-for="(item, index) in widget.option.color"
              :key="index"
              :label="'颜色 ' + (index + 1)"
            >
              <el-col :span="16">
                <el-input v-model="widget.option.color[index]"></el-input>
              </el-col>
              <el-col :span="6">
                <el-color-picker
                  v-model="widget.option.color[index]"
                ></el-color-picker>
              </el-col>
              <el-col :span="2">
                <i
                  class="text-click el-icon-delete"
                  @click="deleteColor(index)"
                ></i>
              </el-col>
            </el-form-item>
            <el-form-item>
              <div class="plus-btn">
                <i class="text-click el-icon-plus" @click="addColor"></i>
              </div>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </el-tab-pane>
    <el-tab-pane label="数据" name="1">
      <widget-data :widget="widget"></widget-data>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import _ from "lodash";
import WidgetData from "./WidgetData.vue";
import ImageUpload from "../part/ImageUpload.vue";
export default {
  props: {
    widget: {
      type: [Object],
      default: () => {},
    },
  },
  data() {
    return {
      maps: [
        {
          label: "中华人民共和国",
          value: "china",
          center: [105, 36],
        },
        {
          label: "安徽",
          value: "安徽",
          center: [117.17, 31.99],
        },
        {
          label: "澳门",
          value: "澳门",
          center: [113.559954, 22.160049],
        },
        {
          label: "北京",
          value: "北京",
          center: [116.28, 40.24],
        },
        {
          label: "重庆",
          value: "重庆",
          center: [107.85, 30.2],
        },
        {
          label: "福建",
          value: "福建",
          center: [118.18, 25.9],
        },
        {
          label: "甘肃",
          value: "甘肃",
          center: [100.77, 37.64],
        },
        {
          label: "广东",
          value: "广东",
          center: [113.14, 22.88],
        },
        {
          label: "广西",
          value: "广西",
          center: [108.88, 23.88],
        },
        {
          label: "贵州",
          value: "贵州",
          center: [106.82, 26.9],
        },
        {
          label: "海南",
          value: "海南",
          center: [109.8, 19.15],
        },
        {
          label: "河北",
          value: "河北",
          center: [116.3, 39.32],
        },
        {
          label: "黑龙江",
          value: "黑龙江",
          center: [128.36, 48.44],
        },
        {
          label: "河南",
          value: "河南",
          center: [113.7, 33.86],
        },
        {
          label: "湖北",
          value: "湖北",
          center: [112.2, 31.15],
        },
        {
          label: "湖南",
          value: "湖南",
          center: [111.59, 27.35],
        },
        {
          label: "江苏",
          value: "江苏",
          center: [119, 32.92],
        },
        {
          label: "江西",
          value: "江西",
          center: [115.85, 27.26],
        },
        {
          label: "吉林",
          value: "吉林",
          center: [126.19, 43.57],
        },
        {
          label: "辽宁",
          value: "辽宁",
          center: [122.25, 41.1],
        },
        {
          label: "内蒙古",
          value: "内蒙古",
          center: [111.65, 45.28],
        },
        {
          label: "宁夏",
          value: "宁夏",
          center: [106.16, 37.32],
        },
        {
          label: "青海",
          value: "青海",
          center: [96.28, 35.38],
        },
        {
          label: "山东",
          value: "山东",
          center: [118.66, 36.35],
        },
        {
          label: "上海",
          value: "上海",
          center: [121.49, 31.27],
        },
        {
          label: "山西",
          value: "山西",
          center: [112.33, 37.64],
        },
        {
          label: "陕西",
          value: "陕西",
          center: [108.65, 35.62],
        },
        {
          label: "四川",
          value: "四川",
          center: [103.04, 30.2],
        },
        {
          label: "台湾",
          value: "台湾",
          center: [121.3, 23.63],
        },
        {
          label: "天津",
          value: "天津",
          center: [117.42, 39.4],
        },
        {
          label: "香港",
          value: "香港",
          center: [114.13, 22.355],
        },
        {
          label: "新疆",
          value: "新疆",
          center: [85.36, 41.8],
        },
        {
          label: "西藏",
          value: "西藏",
          center: [88.68, 31.62],
        },
        {
          label: "云南",
          value: "云南",
          center: [101.42, 25.18],
        },
        {
          label: "浙江",
          value: "浙江",
          center: [120.18, 29.16],
        },
      ],
    };
  },
  computed: {
    series() {
      return this.widget.option.series[0];
    },
  },
  watch: {
    series: {
      handler(val) {
        for (let i = 1; i < this.widget.option.series.length; i++) {
          this.widget.option.series[i].label = _.cloneDeep(val.label);
          this.widget.option.series[i].labelLine = _.cloneDeep(val.labelLine);
        }
      },
      deep: true,
    },
  },
  methods: {
    showWidget(vallue) {
      return this.widget.entity === "chart-" + vallue;
    },
    showProp(value) {
      return this.widget.prop.values.indexOf(value) !== -1;
    },
    handleChangeMap(value) {
      let center = [];
      for (let i = 0; i < this.maps.length; i++) {
        if (this.maps[i].value === value) {
          center = this.maps[i].center;
          break;
        }
      }
      this.widget.option.geo.center = center;
      this.widget.option.series[0].center = center;
    },
    addColor() {
      this.widget.option.color.push("#ffffff");
    },
    deleteColor(index) {
      this.widget.option.color.splice(index, 1);
    },
    uploadSuccess(imageUrl) {
      this.widget.option.series[0].customSymbol = imageUrl;
    },
  },
  components: {
    WidgetData,
    ImageUpload,
  },
};
</script>
<style lang="stylus"></style>